<template>
  <Pannel class="pannel" title="登录页" :loading="loading">
    <div class="pannel-inner-box">
      <div class="login-wrap">
        <img
          class="login-image"
          src="@/assets/images/login/登录框@2x.webp"
          alt=""
        />
        <div class="login-content">
          <div class="title">登陆</div>
          <div class="form-wrap">
            <el-form
              ref="ruleFormRef"
              style="max-width: 600px"
              :model="ruleForm"
              :rules="rules"
              label-width="auto"
              class="demo-ruleForm"
              :size="formSize"
              status-icon
            >
              <el-form-item prop="username">
                <div class="form-item">
                  <div class="icon prefix iconfont icon-zhanghao"></div>
                  <div class="input-box">
                    <input
                      type="text"
                      v-model.trim="ruleForm.username"
                      placeholder="请输入账号"
                    />
                  </div>
                  <div class="suffix"></div>
                </div>
              </el-form-item>

              <el-form-item prop="password">
                <div class="form-item">
                  <div class="icon prefix iconfont icon-mima"></div>
                  <div class="input-box">
                    <input
                      :type="passwordType"
                      v-model.trim="ruleForm.password"
                      placeholder="请输入密码"
                    />
                  </div>
                  <div class="suffix">
                    <div
                      v-show="passwordType === 'password'"
                      class="icon hide-password iconfont icon-xianshiyincang-1"
                      @click="handleIsShowPassword(true)"
                    ></div>
                    <div
                      v-show="passwordType === 'text'"
                      class="icon show-password iconfont icon-xianshiyincang-"
                      @click="handleIsShowPassword(false)"
                    ></div>
                  </div>
                </div>
              </el-form-item>

              <el-form-item prop="code">
                <div class="form-code">
                  <div class="input-code">
                    <input
                      type="text"
                      v-model.trim="ruleForm.code"
                      placeholder="验证码"
                    />
                  </div>

                  <div class="code-image" @click="handleRefreshCode">
                    <img :src="codeImg" alt="" />
                  </div>
                </div>
              </el-form-item>
            </el-form>
          </div>
          <div class="submit" @click="submitForm(ruleFormRef)">
            <img src="@/assets/images/login/登录确认按钮@2x.webp" alt="" />
            <div class="text">确认</div>
          </div>
        </div>
      </div>
    </div>
  </Pannel>
</template>

<script lang="ts" setup>
import { login, getCaptchaImage } from "@/api/index";
import { encrypt } from "@/utils/jsencrypt";

import type { ComponentSize, FormInstance } from "element-plus";
import { onActivated } from "vue";
import { reactive, ref, onMounted } from "vue";

const passwordType = ref("password") as any;
const handleIsShowPassword = (bool: boolean) => {
  passwordType.value = bool ? "text" : "password";
};

const loading = ref(false);
const codeImg = ref("");

const formSize = ref<ComponentSize>("default");
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive({
  username: "",
  password: "",
  code: "",
  uuid: "",
});

const rules = {
  username: [
    {
      required: true,
      message: "账号不能为空",
    },
  ],
  password: [
    { required: true, message: "密码不能为空" },
    { min: 6, message: "密码长度不能小于6位", trigger: "blur" },
  ],
  code: [{ required: true, message: "验证码不能为空" }],
};

onActivated(() => {
  resetForm(ruleFormRef.value);
  handleRefreshCode();
});

onMounted(async () => {
  resetForm(ruleFormRef.value);
  handleRefreshCode();
});

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      const _data = JSON.parse(JSON.stringify(ruleForm));
      _data.password = encrypt(_data.password);
      login(_data);
    } else {
      console.log("error submit!", fields);
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

//  刷新验证码
const handleRefreshCode = async () => {
  const res: any = await getCaptchaImage();
  const { code, uuid, img } = res;
  if (code == 200) {
    ruleForm.uuid = uuid;
    codeImg.value = "data:image/gif;base64," + img;
    console.log(codeImg.value);
  } else {
    ruleForm.uuid = "";
    codeImg.value = "";
  }
};
</script>

<style lang="scss" scoped>
/* 覆盖自动填充的样式 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  font-size: 22px !important; // 删除: px-scale(22px);
  transition: background-color 99999s ease-out, color 99999s ease-out; /* 延迟样式变化 */
}

:deep(.el-form-item__error) {
  padding-top: 10px; // 删除: px-scale(10px);
  font-size: 20px; // 删除: px-scale(20px);
}

.pannel-inner-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;

  .login-wrap {
    position: relative;
    width: 570px; // 删除: px-scale(574px);
    height: 578px; // 删除: px-scale(578px);

    .login-content {
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      height: 100%;

      .title {
        margin-top: 80px; // 删除: px-scale(80px);
        font-size: 36px; // 删除: px-scale(36px);
        font-family: "YouSheBiaoTiHei";
      }

      .form-wrap {
        padding-top: 30px; // 删除: px-scale(30px);
        display: flex;
        flex-direction: column;
        align-items: center;

        .form-item {
          margin-top: 20px; // 删除: px-scale(20px);
          display: flex;
          align-items: center;
          width: 4.6rem; // 删除: px-scale(460px);
          height: 0.6rem; // 删除: px-scale(60px);
          background: rgba(0, 22, 43, 0.51);
          border: 0.01rem solid #2c78a9; // 删除: px-scale(1px);
          border-radius: 0.06rem; // 删除: px-scale(6px);
          box-shadow: 0px 0px 0.08rem rgba(51, 183, 240, 0.5); // 删除: px-scale(8px);
          box-sizing: border-box;

          .icon {
            padding: 0 0.16rem; // 删除: px-scale(16px);
            font-size: 0.32rem; // 删除: px-scale(32px);
            color: #69bcf1;
          }

          .input-box {
            flex: 1;

            input {
              width: 100%;
              height: 100%;
              background-color: transparent !important;
              color: #fff !important;
              font-size: 22px !important; // 删除: px-scale(22px);
            }
          }

          .suffix {
            display: flex;
            justify-content: center;
            width: 60px; // 删除: px-scale(60px);
          }
        }

        .form-code {
          display: flex;
          align-items: center;
          margin-top: 30px; // 删除: px-scale(30px);

          .input-code {
            display: flex;
            align-items: center;
            width: 150px; // 删除: px-scale(460px);
            height: 60px; // 删除: px-scale(60px);
            background: rgba(0, 22, 43, 0.51);
            border: 0.01rem solid #2c78a9; // 删除: px-scale(1px);
            border-radius: 6px; // 删除: px-scale(6px);
            box-shadow: 0px 0px 8px rgba(51, 183, 240, 0.5); // 删除: px-scale(8px);
            box-sizing: border-box;

            input {
              width: 100%;
              height: 100%;
              text-indent: 20px;
              background-color: transparent !important;
              color: #fff !important;
              font-size: 22px !important; // 删除: px-scale(22px);
            }
          }

          .code-image {
            position: relative;
            margin-left: 0.2rem; // 删除: px-scale(20px);
            width: 200px;
            height: 60px; // 删除: px-scale(60px);
            cursor: pointer;
          }
        }
      }

      .submit {
        position: relative;
        width: 282px; // 删除: px-scale(282px);
        height: 83px; // 删除: px-scale(83px);
        margin-top: 20px; // 删除: px-scale(20px);

        .text {
          position: absolute;
          left: 0;
          top: 0;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          height: 100%;
          font-size: 24px; // 删除: px-scale(24px);
        }
      }
    }
  }
}
</style>
